<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--document.querySelector是Es6重要的一个查询对象的方法，写三个例子-->
<p>根据标签选择第一个 p 与元素。</p>
<p>根据标签选择第一个 p 与元素。</p>
<p>根据标签选择第一个 p 与元素。</p>
<p  class="example">根据class选择第一个 p 与元素。</p>
<p  class="example">根据class选择第一个 p 与元素。</p>
<p  class="example">根据class选择第一个 p 与元素。</p>
<p id="example">根据id选择第一个 p 与元素。</p>
<button onclick="selectBytag()">根据标签</button>
<button onclick="selectByclass()">根据class</button>
<button onclick="selectByid()">根据id</button>
<script>
    function selectBytag() {
        /*根据标签选择*/
        document.querySelector("p").style.backgroundColor = "red";
    }

    function selectByclass() {
        document.querySelector(".example").style.backgroundColor = "red";
    }

    function selectByid() {
        document.querySelector("#example").style.backgroundColor = "red";
    }

    /**/

</script>

</body>
</html>